<template>
  <div class="dropEl">
    <el-form ref="form" v-loading="loading" :rules="rules" :model="data">
      <el-form-item
        label-width="78px"
        label="任务名称"
        class="custom-form-item"
        prop="taskName"
      >
        <el-input
          v-model="data.taskName"
          placeholder="请填写任务名称"
          style="width: 60%"
        />
      </el-form-item>
      <el-form-item
        label="任务描述"
        label-width="78px"
        class="custom-form-item"
        prop="dsc"
      >
        <el-input
          v-model="data.dsc"
          type="textarea"
          placeholder="请填写任务描述"
          style="width: 60%"
        />
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="任务类型"
        class="custom-form-item"
        prop="jobType"
      >
        <el-cascader
          :key="data.jobMode"
          v-model="data.jobType"
          :options="taskTypeClassifyOption"
          style="width: 60%"
        />
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="异常处理"
        class="custom-form-item"
        prop="taskPolicy"
      >
        <el-select
          v-model="data.taskPolicy"
          style="width: 60%"
          placeholder="请选择异常处理"
        >
          <el-option
            v-for="f in dict.type.synchronous_exceptionhandling"
            :key="f.value"
            :label="f.label"
            :value="f.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="工作模式"
        class="custom-form-item"
        prop="jobMode"
      >
        <el-select
          v-model="data.jobMode"
          style="width: 60%"
          placeholder="请选择工作模式"
        >
          <el-option
            v-for="f in computedModeList"
            :key="f.value"
            :label="f.label"
            :value="f.value"
            :disabled="f.disabled"
          />
        </el-select>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label-width="78px"
            label="任务模式"
            class="custom-form-item"
            prop="start"
          >
            <el-select
              v-model="data.start"
              style="width: 100%"
              placeholder="请选择一个起始向导"
              @change="changeDatabase('start')"
            >
              <template v-for="f in dict.type.data_base_type">
                <el-option :key="f.value" :label="f.label" :value="f.value" />
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1"> <i class="el-icon-right" /></el-col>
        <el-col :span="9">
          <el-form-item class="custom-form-item" prop="start">
            <el-select
              v-model="data.end"
              style="width: 67%"
              placeholder="请选择一个结束向导"
              @change="changeDatabase('end')"
            >
              <template v-for="f in dict.type.data_base_type">
                <el-option :key="f.value" :label="f.label" :value="f.value" />
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="任务状态" prop="status">
        <el-radio-group v-model="data.status">
          <el-radio
            v-for="dict in dict.type.sys_job_status"
            :key="dict.value"
            :label="dict.value"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  dicts: [
    'data_base_type',
    'synchronous_tasktype',
    'synchronous_exceptionhandling',
    'synchronous_jobmode',
    'sys_job_status',
    'data_sync_writebatch'
  ],
  components: {},
  props: ['data'],
  data() {
    return {
      form: {
        taskName: '',
        dsc: '',
        jobType: '',
        status: '0',
        taskPolicy: '',
        start: '',
        end: '',
        jobMode: '',
        readerBatch: ''
      },
      jobModeList: [],
      loading: false,
      rules: {
        taskName: [{ required: true, message: '任务名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择任务状态', trigger: 'change' }
        ],
        jobType: [
          { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        taskPolicy: [
          { required: true, message: '请选择异常处理方式', trigger: 'change' }
        ],
        start: [{ required: true, message: '请选择起始源', trigger: 'change' }],
        end: [{ required: true, message: '请选择目标源', trigger: 'change' }],
        jobMode: [
          { required: true, message: '请选择工作模式', trigger: 'change' }
        ]
      },
      taskTypeClassifyOption: [
        {
          value: 'common',
          label: '常用',
          children: []
        },
        {
          value: 'basic',
          label: '基本',
          children: []
        }
      ]
    }
  },
  computed: {
    computedModeList() {
      const arr = this.jobModeList
      const v = this.$props.data.jobType
      if (!v || !Array.isArray(v)) {
        return arr
      }
      arr.forEach((f) => {
        delete f.disabled
        f.disabled =
          v[1] == 'SYNC_DATA' ? f.value == 'ONCE' : f.value != 'ONCE'
      })
      if (
        (v[1] == 'SYNC_DATA' && this.$props.data.jobMode == 'ONCE') ||
        (v[1] != 'SYNC_DATA' && this.$props.data.jobMode != 'ONCE')
      ) {
        this.$props.data.jobMode = ''
      }
      return arr
    }
  },
  created() {
    this.loading = true
  },
  async mounted() {
    setTimeout(() => {
      this.loading = false
    }, 1000)
    const { data } = await this.getDicts('synchronous_jobmode')
    data.forEach((f) => {
      this.jobModeList.push({
        value: f.dictValue,
        label: f.dictLabel
      })
    })
    const res = await this.getDicts('synchronous_tasktype')
    res.data.forEach((f) => {
      this.taskTypeClassifyOption[f.remark == 'common' ? 0 : 1].children.push({
        value: f.dictValue,
        label: f.dictLabel
      })
    })
  },
  methods: {
    onSubmit() {},
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    handleSelect(item) {},
    changeDatabase(v) {
      this.$props.data[v == 'start' ? 'sourceId' : 'sinkId'] = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dropEl {
  width: 100%;
  margin: 30px auto;
  border: 1px solid #dcdfe6;
  padding: 40px 15%;
}

.el-col-1 {
  margin-top: 5px !important;
  text-align: center;
}
</style>
